<template>
	<view>
		<view class="bg" />
		<view class="content" style="margin-bottom: 12px;">
			<view style="display: flex;height: 40px;align-items: center;">
				<span style="margin-right: 12px;color: #3183FB;">请输入内容</span>
				<div class="myInput">
					<input type="text" class="verification-code-input">
					<button class="myButton">搜索</button>
				</div>
			</view>
		</view>
		<view style="display: flex;justify-content: space-between;position: relative;top:-156px;padding: 0 20px;">
			<span style="color: white;">共{{total}}条</span>
			<span style="color: white;">待服务⬇</span>
		</view>
		<view class="content" style="margin-bottom: 12px;" v-for="(item, index) in orderList" :key="index">
			<view style="display: flex;justify-content: space-between;width: 100%;">
				<span style="font-size: 16px;">订单号：{{item.number}}</span>
				<span style="font-size: 16px;color: orangered;">￥{{item.realPrice}}</span>
			</view>

			<view style="height: 4px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
			<span style="font-size: 14px;">下单用户：{{item.userId}}</span>

			<br />
			<span style="font-size: 14px;">预约时间：{{item.subscribeTime}}</span>

			<br />
			<span style="font-size: 14px;">服务项目：
				<span v-for="(item1, index) in item.serviceList" :key="index" style="margin-right: 10px;">{{item1.name}}
				</span>

			</span>

			<br />
			<view style="height: 2px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
			<view style="display: flex;justify-content: space-around;width: 100%;">

				<span style="font-size: 12px;opacity: .5;margin-right: 140px;">下单时间：2022-09-12</span>
				<button
					style="width: 82px;font-size: 12px;color: white;border-radius: 24px;background-color: #3183FB;height: 24px;line-height: 24px;"
					@click="ddxq(item.id)">查看详情</button>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				total: 0,
				id:''
			}
		},
		methods: {
			ddxq(id) {
				uni.navigateTo({
					url: '/pages/index/ddxq/ddxq?id='+id,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			getInfo() {
				let that = this
				this.$http({
					url: '/api/order/order/list',
					method: 'get',
					success(res) {
						if (res.data.code == 200) {
							that.orderList = res.data.rows
							that.total = res.data.total
							console.log(that.orderList)
							console.log(that.total)
						} else {
							console.log("sad")
						}
					}
				})
			}
		},
		onLoad() {
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		background-color: #3183FB;
		height: 172px;
	}

	.content {
		position: relative;
		top: -152px;
		left: 22.5rpx;
		border-radius: 20px;
		width: 94%;
		background-color: white;
		padding: 28px 16px;
		box-sizing: border-box;
	}

	.myButton {
		height: 32px;
		width: 62px;
		border-radius: 16px;
		font-size: 12px;
		text-align: center;
		line-height: 32px;
		background-color: #3183FB;
		color: white;
	}

	.myInput {
		height: 40px;
		display: flex;
		align-items: center;
		border: 1px solid lightgray;
		border-radius: 18px;
		padding: 10px 4px;
		box-sizing: border-box;
	}

	.verification-code-input {
		width: 200px;
		margin-right: 10px;
	}
</style>